<template>
    <div>
        <el-form :inline="true" :model="formUser" size="mini">
            <el-form-item label="用户名">
                <el-input v-model="formUser.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formUser.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="requestSearchUser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="manageListData"
                style="width: 100%">
            <el-table-column
                    prop="userFund.createTime"
                    label="时间"
                    width="160"
            >
            </el-table-column>
            <el-table-column
                    label="用户名"
            >
                <template slot-scope="scope">
                    <template v-for="(item,key) of userMapData">
                        <template v-if="scope.row.userFund.userId == key">
                            <span>{{item}}</span>
                        </template>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    prop="product.name"
                    label="产品名"
            >
            </el-table-column>
            <el-table-column
                    prop="product.moneyRate"
                    label="利率"
                    width="100"
            >
                <template slot-scope="scope">
                    <span>{{scope.row.product.moneyRate}}%</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="userFund.amount"
                    label="购买数量"
            >
            </el-table-column>
            <el-table-column
                    prop="userFund.money"
                    label="到期收益"
            >
            </el-table-column>
            <el-table-column
                    prop="userFund.status"
                    label="状态"
                    width="100"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.userFund.status == 0">进行中</span>
                    <span v-else-if="scope.row.userFund.status == 1">已到期</span>
                    <span v-else-if="scope.row.userFund.status == 2">未到期提出</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetManageList(pagination.prePage)"
                @next-click="requestGetManageList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>

    let api = '/manager/user_fund';

    export default {
        name: "ManageRecord",
        data() {
            return {
                manageListData: [],
                userMapData:{},
                formUser: {
                    userName: '',
                    status: ''
                },
                statusOptions: [
                    {label: "全部", value: ""},
                    {label: "进行中", value: 0},
                    {label: "已到期", value: 1},
                    {label: "未到期提出", value: 2},
                ],
                pagination:{
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                }

            }
        },
        mounted() {
            this.requestGetManageList(this.pagination.pageNum);
        },
        methods: {
            requestGetManageList(page) {
                this.requestAxios.requestCMS('post', api + '/get_list.do', {
                    page: page,
                    size: this.pagination.pageSize,
                    userName: this.formUser.userName,
                    address: this.formUser.address,
                    status: this.formUser.status,
                }, (response) => {
                    // console.log(response)
                    let data = response.data.pageList;
                    this.userMapData = response.data.userMap;
                    this.manageListData = data.list;
                    this.pagination.total = data.total;
                    this.pagination.prePage = data.prePage;
                    this.pagination.pageNum = data.pageNum;
                    this.pagination.nextPage = data.nextPage;
                });
            },
            requestSearchUser() {
                this.requestGetManageList(1);
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetManageList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetManageList(page)
            }
        }
    }
</script>

<style scoped>

</style>
